<template>
  <div class="detailBox" v-loading="loading">
    <div class="input_">
      <m-input
        placeholder="请输入内容"
        v-model="queryData.value"
        class="input-with-select"
        @keyup.enter.native="handleIconClick(queryData)"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleIconClick(queryData)"
        ></el-button>
      </m-input>
    </div>
    <m-no-data v-if="tableData.length==0"></m-no-data>
    <div
      class="car click"
      v-for="(item, index) in tableData"
      @click="toDetail(item)"
    >
      <div class="top_">
        <div class="left_">
          <div class="icon_">
            <div class="fxpg">风险评估</div>
            <div class="fxpg" v-if="item.severity_level == 0">未知</div>
            <div class="fxpg" v-if="item.severity_level == 1">无危胁</div>
            <div class="dfx" v-if="item.severity_level == 2">低风险</div>
            <div class="zfx" v-if="item.severity_level == 3">中风险</div>
            <div class="gfx" v-if="item.severity_level == 4">高风险</div>
            <div class="gfx" v-if="item.severity_level == 5">严重风险</div>
          </div>
          <div class="lineVal">
            <div class="padd">
              <div class="sumText">
                {{
                  item.published_time
                    ? new Date(item.published_time).F("yyyy-MM-dd")
                    : "-"
                }}
                公开
              </div>
              <div class="sumVal">
                {{
                  item.update_time
                    ? new Date(item.update_time).F("yyyy-MM-dd")
                    : "-"
                }}
                更新
              </div>
            </div>
            <div class="line_ l2 mal"></div>
          </div>
        </div>
        <div class="right_">
          <div class="dl_">
            <div class="cen">
              <div class="textName">
                <span class="text">
                  {{ item.name }}
                  <span v-if="item.id">({{ item.id }})</span>
                </span>
              </div>
              <div class="tag">
                {{ item.description }}
              </div>
              <div class="info">
                <div class="li">
                  <span>影响厂商：</span>
                  <span class="val">-</span>
                </div>
                <div class="li">
                  <span>影响产品：</span>
                  <span class="val">-</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pageCter">
      <m-pagination
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </m-pagination>
    </div>
  </div>
</template>

<script>
// 引入接口
import { IntelligenceSearch } from "@/request/home/index";
export default {
  name: "Detail",
  data() {
    return {
      loading: true,
      queryData: {},
      tableData: [],
      page: 1,
      total: 0,
      pageSize: this.preferences.TablePageSize,
      pageSizes: this.preferences.TablePageSizes,
      activeName: "1",
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.queryData = {
      types: this.$route.query.types,
      value: this.$route.query.value,
      page: this.page,
      size: this.pageSize,
    };
    this.getData(this.queryData);
  },
  methods: {
    getData(data) {
      this.loading = true;
      IntelligenceSearch(data)
        .then((res) => {
          console.log(res);
          this.loading = false;
          if (res.data.code == 200) {
            let resData = res.data;
            if (resData.data.intel_type == 4) {
              this.$router.push({ query: { ...data } });
              this.tableData = resData.data.vuln_info.items;
              this.total = resData.data.vuln_info.total_record;
            } else if (resData.data.intel_type == 0) {
              this.$m.to("HomeIpDetail", {
                type: resData.data.intel_type,
                value: this.queryData.value,
              });
            } else if (resData.data.intel_type == 1) {
              this.$m.to("HomeDomainDetail", {
                type: resData.data.intel_type,
                value: this.queryData.value,
              });
            }
          }

        })
        .catch((err) => {
          this.loading = false;
          if (err == '查询情报来源时没有找到结果') { // 查询情报来源时没有找到结果
            this.tableData = []
            this.total = 0
            this.$router.push({ query: { ...data } });
          }
        });
    },
    handleIconClick(data) {
      this.getData(data);
    },
    toDetail(item) {
      this.$m.to("HomeMySqlDetailTwo", {
        id: item.id,
        value: this.queryData.value,
      });
    },
    // 排序改变
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
    },
    // 每页数量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page = 1;
      this.pageSize = val;
      this.getData(this.queryData);
    },
    // 页码变化
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.getData(this.queryData);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";
.detailBox {
  background-color: transparent !important;
  box-shadow: none !important ;
  ::v-deep .input_ {
    width: 100%;
    .el-input__inner {
      height: px2(34);
    }
    .el-input-group__append {
      background-color: $mainColor;
      width: px2(32);
      height: px2(32);
      padding: 0;
      .el-button {
        width: px2(32);
        height: px2(32);
        padding: 0;
        margin: 0;
      }
    }
    .el-icon-search {
      font-size: px2(16);
      color: #fff;
    }
  }
  .car {
    padding: px2(20) px2(26);
    margin-top: px2(8);
    border-radius: px2(2);
    margin-bottom: px2(8);
    background-color: #fff;
    border-radius: px2(2);
    box-shadow: 0 px2(1) px2(1) 0 rgba(0, 0, 0, 0.1);
    .top_ {
      display: flex;
      flex-wrap: nowrap;
      justify-content: start;
      align-items: top;
      .left_ {
        width: 10%;
        margin-right: px2(24);

        .icon_ {
          width: px2(76);
          height: px2(90);
          border-radius: px2(2);
          border: px2(1) solid #d8d8d8;
          text-align: center;
          .fxpg {
            margin-top: px2(22);
            font-size: px2(12);
            color: #727478;
          }
          .zfx {
            margin-top: px2(6);
            font-size: px2(16);
            color: #cf4b17;
          }
          .dfx {
            margin-top: px2(6);
            font-size: px2(16);
            color: #cf8c17;
          }
          .gfx {
            margin-top: px2(6);
            font-size: px2(16);
            color: #cf171d;
          }
        }
        .lineVal {
          width: px2(76);
          .padd {
            margin-top: px2(5);
            padding: px2(5) 0;
            text-align: center;
            white-space: nowrap;
            font-size: px2(12);
            .sumText {
              margin-bottom: px2(5);

              color: $fontColorL;
            }
            .sumVal {
              color: $fontColorL;
              span {
                color: #f52727;
              }
            }
          }
        }
      }
      .right_ {
        width: 90%;
        margin-top: px2(10);
        .dl_ {
          display: flex;
          flex-wrap: nowrap;
          justify-content: start;
          padding-bottom: px2(18);
          .cen {
            margin-right: px2(100);
            .textName {
              font-size: px2(14);
              margin-bottom: px2(20);
              color: #000000;
              font-weight: bold;
              .text {
                span {
                  color: #cf171d;
                }
              }
            }
            .tag {
              font-size: px2(12);
              margin-bottom: px2(20);
              span {
                color: #cf171d;
              }
            }
            .info {
              font-size: px2(12);
              color: $fontColorL;
              display: flex;
              flex-wrap: nowrap;
              justify-content: start;
              align-items: center;
              .li {
                margin-right: px2(40);
                span {
                  display: inline-block;
                  vertical-align: middle;
                }
                .val {
                  color: $fontColorW;
                  margin-left: px2(16);
                }
              }
            }
          }
        }
      }
    }
  }
  .pageCter {
    padding-top: px2(10);
    text-align: right;
  }
}
.red {
  color: #f56c6c;
}
</style>
